<template>
  <div id="singer">
    <transition name="fade">
      <loading v-show="isLoading == true"></loading>
    </transition>
    <div id="choose">
      <div class="choose">
        <div class="name"><span>语种</span></div>
        <div class="sort">
          <div class="item" v-for="(item, index) in areaList" :key="index">
            <span
              @click="areaChoose(item, index)"
              :class="[areaNum == index ? 'active' : '']"
              >{{ item.value }}</span
            >
            <span v-show="index < areaList.length - 1"></span>
          </div>
        </div>
      </div>
      <div class="choose">
        <div class="name"><span>类型</span></div>
        <div class="sort">
          <div class="item" v-for="(item, index) in typeList" :key="index">
            <span
              @click="typeChoose(item, index)"
              :class="[typeNum == index ? 'active' : '']"
              >{{ item.value }}</span
            >
            <span v-show="index < typeList.length - 1"></span>
          </div>
        </div>
      </div>
      <div class="choose">
        <div class="name"><span>筛选</span></div>
        <div class="sort">
          <div class="item" v-for="(item, index) in initialList" :key="index">
            <span
              @click="initialChoose(item, index)"
              :class="[intialNum == index ? 'active' : '']"
              >{{ item.value }}</span
            >
            <span v-show="index < initialList.length - 1"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="content">
        <div class="item" v-for="(item, index) in resultList" :key="index">
          <div class="img" @click="gotoDetail(item)">
            <img v-lazy="item.img1v1Url" alt="" />
          </div>
          <div class="name">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="more" @click="showMore">
        <h3 v-show="moreShow == true">点击加载更多</h3>
        <h3 v-show="moreShow == false">没有更多了哦</h3>
      </div>
    </div>
  </div>
</template>

<script>
import loading from "../../../components/loading.vue";
export default {
  components: {
    loading,
  },
  data() {
    return {
      isLoading: true,
      // 语种列表
      areaList: [
        {
          num: -1,
          value: "全部",
        },
        {
          num: 7,
          value: "华语",
        },
        {
          num: 96,
          value: "欧美",
        },
        {
          num: 8,
          value: "日本",
        },
        {
          num: 16,
          value: "韩国",
        },
        {
          num: 0,
          value: "其他",
        },
      ],
      // 语种被选中
      areaShow: false,
      areaNum: 0,
      // 类型列表
      typeList: [
        {
          num: -1,
          value: "全部",
        },
        {
          num: 1,
          value: "男歌手",
        },
        {
          num: 2,
          value: "女歌手",
        },
        {
          num: 3,
          value: "乐队",
        },
      ],
      typeShow: false,
      typeNum: 0,
      // 筛选列表
      initialList: [
        {
          num: -1,
          value: "热门",
        },
        {
          num: "a",
          value: "A",
        },
        {
          num: "b",
          value: "B",
        },
        {
          num: "c",
          value: "C",
        },
        {
          num: "d",
          value: "D",
        },
        {
          num: "e",
          value: "E",
        },
        {
          num: "f",
          value: "F",
        },
        {
          num: "g",
          value: "G",
        },
        {
          num: "h",
          value: "H",
        },
        {
          num: "i",
          value: "I",
        },
        {
          num: "j",
          value: "J",
        },
        {
          num: "k",
          value: "K",
        },
        {
          num: "l",
          value: "L",
        },
        {
          num: "m",
          value: "M",
        },
        {
          num: "n",
          value: "N",
        },
        {
          num: "o",
          value: "O",
        },
        {
          num: "p",
          value: "P",
        },
        {
          num: "q",
          value: "Q",
        },
        {
          num: "r",
          value: "R",
        },
        {
          num: "s",
          value: "S",
        },
        {
          num: "t",
          value: "T",
        },
        {
          num: "u",
          value: "U",
        },
        {
          num: "v",
          value: "V",
        },
        {
          num: "w",
          value: "W",
        },
        {
          num: "x",
          value: "X",
        },
        {
          num: "y",
          value: "Y",
        },
        {
          num: "z",
          value: "Z",
        },
        {
          num: 0,
          value: "#",
        },
      ],
      intialShow: false,
      intialNum: 0,
      // 结果列表
      resultList: [],
      // 分页
      nowPage: 0,
      // 是否显示更多
      moreShow: true,
      // 当前获取长度
      length: 0,
    };
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      this.$axios({
        url: "/mv/all",
        params: {
          limit: this.pages.size,
          offset: (val - 1) * this.pages.size,
        },
      }).then((res) => {
        this.mvList = res.data.data;
      });
    },
    getSingerListSingle(limit, offset, area, type, initial) {
      this.$axios({
        url: "/artist/list",
        params: {
          limit,
          offset: offset * limit,
          area,
          type,
          initial,
        },
      }).then((res) => {
        this.isLoading = false;
        this.length = res.data.artists.length;
        this.resultList = res.data.artists;
      });
    },
    getSingerList(limit, offset, area, type, initial) {
      // 请求热门 全部 全部
      this.$axios({
        url: "/artist/list",
        params: {
          limit,
          offset: offset * limit,
          area,
          type,
          initial,
        },
      }).then((res) => {
        this.length = res.data.artists.length;
        this.resultList = this.resultList.concat(res.data.artists);
      });
    },
    // 语种选择
    areaChoose(item, index) {
      this.areaNum = index;
      this.getSingerListSingle(
        30,
        this.nowPage,
        item.num,
        this.typeList[this.typeNum].num,
        this.initialList[this.intialNum].num
      );
    },
    // 类型选择
    typeChoose(item, index) {
      this.typeNum = index;
      this.getSingerListSingle(
        30,
        this.nowPage,
        this.areaList[this.areaNum].num,
        item.num,
        this.initialList[this.intialNum].num
      );
    },
    // 筛选选择
    initialChoose(item, index) {
      this.intialNum = index;
      this.getSingerListSingle(
        30,
        this.nowPage,
        this.areaList[this.areaNum].num,
        this.typeList[this.typeNum].num,
        item.num
      );
    },
    // 点击加载更多
    showMore() {
      this.nowPage++;
      this.getSingerList(
        20,
        this.nowPage,
        this.areaList[this.areaNum].num,
        this.typeList[this.typeNum].num,
        this.initialList[this.intialNum].num
      );
      if (this.length < 20) {
        this.moreShow = false;
      } else {
        this.moreShow = true;
      }
    },
    // 前往歌手详情页
    gotoDetail(item) {
      this.$router.replace({
        name: "singerDetail",
        query: {
          id: item.id,
        },
      });
    },
  },
  created() {
    this.getSingerListSingle(
      30,
      this.nowPage,
      this.areaList[this.areaNum].num,
      this.typeList[this.typeNum].num,
      this.initialList[this.intialNum].num
    );
  },
};
</script>

<style scoped>
@import url("../../../css/singer");
</style>